<template>
  <div class="page-one">
    <!--上传文件-->
    <div style="margin-top: 0px">
      <input
        id="myfile"
        type="file"
        name="myfile"
        @change="preview($event)"
      >
      <iframe
        v-if="!showPdf"
        id="preview"
        height="560"
        width="100%"
      />
      <iframe
        v-if="showPdf"
        id="previewPdf"
        :src="'/static/pdf/web/viewer.html?file=' + fileUrl"
        height="560"
        width="100%"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileUrl: '',
      showPdf: false
    }
  },
  methods: {
    // 这是打开本地文件进行预览
    preview(event) {
      var files = document.getElementById('myfile').files[0]
      if (files.type !== 'application/pdf') {
        alert('只能上传一份pdf文件哦～')
        return
      }
      this.showPdf = true
      this.fileUrl = this.getObjectURL(files)
    },
    getObjectURL(file) {
      let url = null
      if (window.createObjectURL !== undefined) {
        // basic
        url = window.createObjectURL(file)
      } else if (window.webkitURL !== undefined) {
        // webkit or chrome
        url = window.webkitURL.createObjectURL(file)
      } else if (window.URL !== undefined) {
        // mozilla(firefox)
        url = window.URL.createObjectURL(file)
      }
      return url
    }
  }
}
</script>

<style scoped>
.page-one button {
  margin-left: 10px;
}
</style>
